<template>
  <div class="pro-table">
    <!-- 工具栏 -->
    <div v-if="showToolbar" class="pro-table-toolbar">
      <div class="toolbar-left">
        <slot name="toolbar-left"></slot>
      </div>
      <div class="toolbar-right">
        <ASpace>
          <slot name="toolbar-right"></slot>
          <!-- 导出按钮 -->
          <ATooltip v-if="showExport" title="导出Excel">
            <AButton
              type="default"
              :icon="h(DownloadOutlined)"
              :loading="exportLoading"
              @click="handleExport"
            />
          </ATooltip>
          <!-- 列设置 -->
          <ColumnSetting
            v-if="showColumnSetting"
            :columns="innerColumns"
            @change="handleColumnChange"
          />
          <!-- 刷新按钮 -->
          <ATooltip v-if="showRefresh" title="刷新">
            <AButton
              type="default"
              :icon="h(ReloadOutlined)"
              :loading="loading"
              @click="handleRefresh"
            />
          </ATooltip>
        </ASpace>
      </div>
    </div>

    <!-- 表格 -->
    <ATable
      v-bind="$attrs"
      :columns="visibleColumns"
      :data-source="dataSource"
      :loading="loading"
      v-on="tableListeners"
    >
      <!-- 透传所有插槽 -->
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}"></slot>
      </template>
    </ATable>
  </div>
</template>

<script setup>
import { ref, computed, watch, h, useAttrs } from 'vue'
import { message } from 'ant-design-vue'
import { ReloadOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import ColumnSetting from './ColumnSetting.vue'
import {
  saveColumnConfig,
  getColumnConfig,
  clearColumnConfig,
  mergeColumnConfig
} from '@/utils/columnStorage'
import { exportTableToExcel } from '@/utils/exportExcel'

const props = defineProps({
  // 列配置
  columns: {
    type: Array,
    required: true,
    default: () => []
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 表格唯一标识（用于保存列配置）
  tableKey: {
    type: String,
    default: ''
  },
  // 是否显示工具栏
  showToolbar: {
    type: Boolean,
    default: true
  },
  // 是否显示列设置
  showColumnSetting: {
    type: Boolean,
    default: true
  },
  // 是否显示刷新按钮
  showRefresh: {
    type: Boolean,
    default: true
  },
  // 是否显示导出按钮
  showExport: {
    type: Boolean,
    default: true
  },
  // 导出文件名（不含扩展名）
  exportFileName: {
    type: String,
    default: 'export'
  },
  // 数据源
  dataSource: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['refresh', 'column-change', 'export'])
const attrs = useAttrs()

// 内部列配置（包含visible属性）
const innerColumns = ref([])

// 导出加载状态
const exportLoading = ref(false)

// 初始化列配置
const initColumns = () => {
  if (!props.tableKey) {
    // 没有tableKey时，直接使用原始列配置
    innerColumns.value = props.columns.map(col => ({
      ...col,
      visible: col.visible !== false
    }))
    return
  }

  // 获取保存的列配置
  const savedConfig = getColumnConfig(props.tableKey)
  if (savedConfig) {
    // 合并保存的配置
    innerColumns.value = mergeColumnConfig(props.columns, savedConfig)
  } else {
    // 首次使用，使用默认配置
    innerColumns.value = props.columns.map(col => ({
      ...col,
      visible: col.visible !== false
    }))
  }
}

// 可见的列（过滤掉不可见的列）
const visibleColumns = computed(() => {
  return innerColumns.value.filter(col => {
    // 操作列始终显示
    if (col.key === 'action' || col.dataIndex === 'action') {
      return true
    }
    return col.visible !== false
  })
})

// 处理列变化
const handleColumnChange = (checkedKeys) => {
  // 更新列的可见性
  innerColumns.value = innerColumns.value.map(col => {
    const key = col.key || col.dataIndex
    return {
      ...col,
      visible: checkedKeys.includes(key) || key === 'action'
    }
  })

  // 保存配置
  if (props.tableKey) {
    saveColumnConfig(props.tableKey, innerColumns.value)
  }

  // 触发事件
  emit('column-change', visibleColumns.value)
}

// 刷新
const handleRefresh = () => {
  emit('refresh')
}

// 导出Excel
const handleExport = async () => {
  try {
    exportLoading.value = true
    
    // 触发导出前的事件，允许父组件自定义导出逻辑
    const shouldContinue = emit('export', {
      columns: visibleColumns.value,
      dataSource: props.dataSource
    })
    
    // 如果父组件返回 false，则不执行默认导出
    if (shouldContinue === false) {
      return
    }
    
    // 执行默认导出
    const result = exportTableToExcel({
      columns: visibleColumns.value,
      dataSource: props.dataSource,
      fileName: props.exportFileName
    })
    
    if (result.success) {
      message.success('导出成功')
    } else {
      message.error(result.message || '导出失败')
    }
  } catch (error) {
    console.error('导出失败:', error)
    message.error('导出失败')
  } finally {
    exportLoading.value = false
  }
}

// 重置列配置（供外部调用）
const resetColumns = () => {
  if (props.tableKey) {
    clearColumnConfig(props.tableKey)
  }
  initColumns()
}

// 监听columns变化
watch(
  () => props.columns,
  () => {
    initColumns()
  },
  { immediate: true, deep: true }
)

// 获取表格监听器（排除attrs中的非事件属性）
const tableListeners = computed(() => {
  const listeners = {}
  Object.keys(attrs).forEach(key => {
    if (key.startsWith('on')) {
      listeners[key] = attrs[key]
    }
  })
  return listeners
})

// 暴露方法给父组件
defineExpose({
  resetColumns,
  handleExport
})
</script>

<style lang="scss" scoped>
.pro-table {
  .pro-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 0;

    .toolbar-left {
      flex: 1;
    }

    .toolbar-right {
      display: flex;
      align-items: center;
    }
  }

  // 移动端适配
  @media screen and (max-width: 768px) {
    .pro-table-toolbar {
      margin-bottom: 12px;
      padding: 8px 0;
      
      .toolbar-left,
      .toolbar-right {
        font-size: 12px;
      }
    }
  }
}
</style>

